<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="Author" content="Tencent.AlloyTeam" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,target-densitydpi=medium-dpi" />

	<link rel="stylesheet" type="text/css" href="css/mui-base.css" />
	<link rel="stylesheet" type="text/css" href="css/mui-slider.css" />
	<style type="text/css">
		.container{
			padding: 10px;
		}
		h4{
			margin: 10px 0;
		}
		.MUI{
			position: absolute;
			font-size: 80px;
			font-weight: bold;
			left:0;
			top: 40%;
		}

	</style>
</head>

<div class="container">
	<h4>Animation</h4>
	<div id="MUI" class="MUI">MUI</div>
	<input id="run" type="button" value="run" />

</div>
<script type="text/javascript" src="js/JM.js"></script>
<script type="text/javascript">
	var $D = JM.dom;
	var runBtn = $D.id("run");
	var muiElem = $D.id("MUI");
	runBtn.onclick = function(){
		$D.setStyle(runBtn,"display","none");
		muiElem.style.cssText = "";

		setTimeout(function(){
			J.Animation({
				selector:"#MUI",
				duration:1000,
				use3d:true
			}).setStyle({
				"left":"40%",
				"color":"blue"
			}).transit(function(){
				this.scale(.5).setStyle({
					color:"red"
				}).transit(function(){
					this.rotate(180).setStyle({
						opacity:0
					}).transit(function(){
						this.toOrigin().setStyle({
							"opacity":1,
							"color":"green"
						}).transit(function(){
							$D.setStyle(runBtn,"display","block");
						});
					});
				});
			});
		},0);
	}



</script>
</body>
</html>
